import 'package:aqua_plunge/constants/colors.dart';
import 'package:aqua_plunge/controller/DatabaseListController.dart';
import 'package:aqua_plunge/model/Creation.dart';
import 'package:aqua_plunge/page/shop_page.dart';
import 'package:aqua_plunge/widget/custom_avatar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

import '../controller/UserController.dart';
import '../post/post_detail_page.dart';
import '../widget/BroadCasterItemWidget.dart';

class BroadcasterPage extends StatefulWidget {
  const BroadcasterPage({super.key});

  @override
  State<BroadcasterPage> createState() => _BroadcasterPageState();
}

class _BroadcasterPageState extends State<BroadcasterPage> with AutomaticKeepAliveClientMixin{

  final DatabaseController _controller = Get.find<DatabaseController>();
  final UserController _userController = Get.find<UserController>();

  get _toobarview => Obx((){
    return  Container(
      padding:
      const EdgeInsets.only(top: 50, left: 24, right: 24, bottom: 24),
      child: Row(
        children: [
          CustomAvatar(
              width: 42,
              height: 42,
              netPath: _userController.userInformation.avatarUrl??_userController.userInformation.avatar??''),
          const SizedBox(
            width: 38,
          ),
          Expanded(
              child: Container(
                alignment: Alignment.center,
                child: const Text(
                  "Explore",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.bold),
                ),
              )),
          SizedBox(
            width: 80,
            height: 32,
            child: Stack(
              children: [

                GestureDetector(child:  Image.asset(
                  "images/icon_wallet.png",
                  fit: BoxFit.fill,
                ),onTap: (){Get.to(() => const ShopPage());}),

                Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(left: 10),
                    child: Text(
                      _userController.userInformation.availableCoins.toString(),
                      style: const TextStyle(
                          color: AppColors.coinsColor, fontSize: 16),
                    ))
              ],
            ),
          )
        ],
      ),
    );
  });

  _gridview(BuildContext context) {
    return Expanded(child: MediaQuery.removePadding(context: context,
        removeTop: true,
        removeBottom: true,
        child: Padding(
          padding: const EdgeInsets.only(left: 22,right: 22),
          child: Obx(() {
            return MasonryGridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16,
                itemCount: _controller.creations.length,
                itemBuilder: (context,index){
                  Creation creations = _controller.creations[index];
                  return GestureDetector(
                      onTap: () async {
                        Get.to(() => PageDetailPage(
                          postid: creations.postId!,
                          userid: creations.userId!,
                        ));
                      },
                      child: Container(
                        key: PageStorageKey<String>(creations.postId.toString()),
                        child: BroadCasterItemWidget(creation: creations)),
                      );
                });
          }),
        )));
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage('images/img_primary_bg.png'),
              fit: BoxFit.fill)),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _toobarview,
            _gridview(context)
          ],
        ),
    );
  }

  @override
  bool get wantKeepAlive => true;

}
